<template>
    <div class="activityNum">
        <m-title :title="title"></m-title>
        <split></split>
        <div class="activity-num-wrapper">
            <div class="activity-num-info">
                <div class="start-time">
                    <div class="left">
                        <i class="icon"></i>
                        <span class="text">开始时间</span>
                    </div>
                    <div class="right">
                        <span class="text">{{DetailList.startTime}}</span>
                        |
                        <span class="text">{{DetailList.startHour}}</span>
                    </div>
                </div>
                <div class="end-time">
                    <div class="left">
                        <i class="icon"></i>
                        <span class="text">结束时间</span>
                    </div>
                    <div class="right">
                        <span class="text">{{DetailList.endTime}}</span>
                        |
                        <span class="text">{{DetailList.endHour}}</span>
                    </div>
                </div>
                <div class="will-num">
                    <div class="left">
                        <i class="icon"></i>
                        <span class="text">报名人数</span>
                    </div>
                    <div class="right">
                        <span class="text num-text">{{DetailList.people}}</span>
                        /
                        <span class="text">{{DetailList.totalPeople}}</span>
                        人
                    </div>
                </div>
            </div>
            <split></split>
            <div class="activity-num-item">
                <ul>
                    <li class="activity-num-list" v-for="(item, index) in DetailList.willNum">
                        <div class="left">
                            <img class="left-img" :src="item.img" alt="" />
                            <span class="left-text">{{item.name}}</span>
                        </div>
                        <div class="right">
                            <span class="text" v-show="item.checkType === 1">报名成功</span>
                            <span class="text audit-text" v-show="item.checkType === 0">正在审核</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!DetailList.willNum">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'
    export default {
        data () {
            return {
                DetailList: {},
                title: "报名情况"
            }
        },
        methods: {
            getDetailInfo () {
                axios.get('./static/venueDetail.json', {
                    params: {
                        id: this.$route.params.id
                    }
                }).then((res) => {
                    res = res.data.data
                    this.DetailList = res.venueDetailList[0]
                })
            }
        },
        components: {Loading,Split,MTitle},
        created () {
            this.id = this.$route.params.id
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    .activityNum
        width: 100%
        min-height: 100%
        position: relative
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .activity-num-wrapper
            .activity-num-info
                width: 100%
                height: 120px
                background: #fff
                padding: 0 15px
                box-sizing: border-box
                .start-time,.end-time,.will-num
                    width: 100%
                    height: 40px
                    line-height: 40px
                    border-bottom: 1px solid #eee
                    display: flex
                    align-items: center
                    .left
                        width: 100px
                        flex: 0 0 100px
                        .icon
                            background: url('./icon1.png') no-repeat
                            width: 18px
                            height: 18px
                            background-size: 100% 100%
                            display: inline-block
                            vertical-align: middle
                        .text
                            color: #0094d4
                            display: inline-block
                            vertical-align: middle
                    .right
                        flex: 1
                        text-align: right
                        color: #ccc
                        .text
                            color: #d40000
                .end-time
                    .left
                        .icon
                            background: url('./icon2.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #888
                    .right
                        .text
                            color: #888
                .will-num
                    border-bottom: 0
                    .left
                        .icon
                            background: url('./icon3.png') no-repeat
                            width: 13px
                            height: 16px
                            background-size: 100% 100%
                        .text
                            color: #000
                    .right
                        color: #000
                        .text
                            color: #000
                        .num-text
                            color: #d40000
            .activity-num-item
                width: 100%
                padding-bottom: 50px
                .activity-num-list
                    width: 100%
                    height: 65px
                    padding: 0 15px
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    margin-top: 10px
                    &:first-child
                        background: #0094d4
                        .left
                            .left-text
                                color: #fff
                        .right
                            .text
                                color: #fff
                    .left
                        flex: 1
                        font-size: 0
                        .left-img
                            width: 56px
                            height: 56px
                            border-radius: 50%
                            display: inline-block
                            vertical-align: middle
                        .left-text
                            display: inline-block
                            font-size: 16px
                            color: #000
                            vertical-align: middle
                            margin-left: 10px
                    .right
                        width: 100px
                        flex: 0 0 100px
                        text-align: right
                        .text
                            color: #d40000
                            &.audit-text
                                color: #888
</style>